<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝旭作业</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            height: 200px;
            width: 400px;
            left: 39%;
            background: url("1.jpg") no-repeat;
            background-size: 400px 200px;
        }
        
        .box1 {
            display: none;
            position: absolute;
            left: 64%;
            top: 81%;
        }
        
        .box2 {
            display: block;
            position: absolute;
            height: 20px;
            width: 20px;
            left: 70%;
            top: 82%;
            border: 1px solid black;
        }
        
        .text {
            width: 32px;
            outline: none;
            margin: 0;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="box1">
            <button class="bt1">-</button>
            <input type="text" class="text">
            <button class="bt2">+</button>
        </div>
        <div class="box2">+1</div>
    </div>
    <script>
        var text = document.querySelector('.text');
        var bt1 = document.querySelector('.bt1');
        var bt2 = document.querySelector('.bt2');
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        bt1.onclick = function() {
            if (text.value > 0)
                text.value--;
            else if (text.value <= 0)
                alert('该宝贝不能再减少啦！');
            else
                alert('请输入数字！');
        };
        bt2.onclick = function() {
            if (text.value < 10)
                text.value++;
            else if (text.value >= 10)
                alert('该宝贝不能再增加啦！');
            else
                alert('请输入数字！');
        };
        box2.onclick = function() {
            box1.style.display = 'block';
            this.style.display = 'none';
        };
    </script>
</body>

</html>